﻿<!DOCTYPE html>
<!--[if lt IE 7]>      <html class='no-js lt-ie9 lt-ie8 lt-ie7'> <![endif]-->
<!--[if IE 7]>         <html class='no-js lt-ie9 lt-ie8'> <![endif]-->
<!--[if IE 8]>         <html class='no-js lt-ie9'> <![endif]-->
<!--[if gt IE 8]><!--> <html class='no-js'> <!--<![endif]-->
<head>
	<meta charset='UTF-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
	<meta name='MetaComment' content='Description of site content'>
	<meta name='keywords' content='Add, keywords, here, like, so'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link rel='stylesheet' href='/stylesheets/normalize.css'>
	<link rel='stylesheet' href='/stylesheets/main.css'>
	<script src='/javascripts/vendor/jquery-1.8.2.min.js'></script>
	<script src='/javascripts/vendor/modernizr-2.6.2.min.js'></script>
	<script src='/javascripts/plugins.js'></script>
	<script src='/javascripts/main.js'></script>
	<title>MetaComment</title>
	<% if (typeof(data) != "undefined") { %><script type="text/javascript">loggedIn = <%= data %>;</script><% } %>
	<% if (typeof(errori) != "undefined") { %><script type="text/javascript">loginError = '<%= errori %>';</script><% } %>
	<% if (typeof(errory) != "undefined") { %><script type="text/javascript">registerError = '<%= errory %>';</script><% } %>
</head>
<body>
	<!--[if lt IE 7]>
		<p class='chromeframe'>You are using an <strong>outdated</strong> browser. Please <a href='http://browsehappy.com/'>upgrade your browser</a> or <a href='http://www.google.com/chromeframe/?redirect=true'>activate Google Chrome Frame</a> to improve your experience.</p>
	<![endif]-->
	<div id='overlay'></div>
	<div id='login'>
		<img class='close-button' src='/images/iconmonstr-x-mark-4-icon.png' alt='close' width='40'>
		<form action='/' method='post'>
			<input class='textbox' type='text' value='Username' id='login-username' name='login[username]'><br>
			<input class='textbox' type='password' value='Password' id='login-password' name='login[password]'><br>
			<div id='badlogin' class='register-error'>Wrong Username or Password</div>
			<input type='submit' value='Login' class='bigger button'>
			<a href='/password'><p id='forgot'>Forgot your password?</p></a>
		</form>
	</div>
	<div id='registeration'>
		<img class='close-button' src='/images/iconmonstr-x-mark-4-icon.png' alt='close' width='40'>
		<form action='/register' method='post'  onSubmit='return validateForm()'>
			<input class='textbox' type='text' value='Desired username' id='register-username' name='register[username]'><br>
			<div id='invalidusername' class='register-error'>Invalid username!</div>
			<input class='textbox' type='password' value='Password' id='register-password' name='register[password]' style='margin-bottom:8px;'><br>
			<input class='textbox' type='text' value='Your e-mail address' id='register-email' name='register[email]'><br>
			<div id='invalidemail' class='register-error'>Invalid e-mail address!</div>
			<div id='badregister' class='register-error'></div>
			<input type='submit' value='Register, for free!' class='bigger button'>
		</form>
	</div>
	<div id='header'>
		<p id='loginname'></p>
		<input type='button' value='Login' class='button' id='login-button'><span id='or'>-OR-</span>
		<input type='button' value='Register' class='button' id='register-button'>
		<input type='button' value='Logout' class='button' id='logout-button' style='display:none;'>
	</div>

	<div id='wrapper'>
		<h1>MetaComment</h1>
		<a href='http://www.youtube.com'><div class='original'>YouTube</div></a>
		<div class='post'>
			<div class='main'>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam erat. Fusce eu enim vitae neque feugiat lacinia eget nec nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur ultricies nisi, at lobortis sem mattis in. In at dui lacus. Nullam aliquam malesuada hendrerit. Nulla sagittis suscipit enim ac blandit. Duis lobortis ornare tincidunt. Curabitur pharetra luctus est, quis dignissim tellus tincidunt ut. Nulla venenatis aliquet consequat.</p>
			</div>
			<p>Fusce consequat odio at nunc tincidunt id lacinia lorem ultrices. Fusce tempor, quam eget vehicula fermentum, sapien purus egestas dui, non rhoncus nisi tellus facilisis magna. Curabitur iaculis sodales pellentesque. Nunc pellentesque blandit lacinia. Vivamus vel sem eget nulla bibendum dapibus. Quisque quam quam, commodo nec egestas eu, pharetra ac sem. Nunc ante tellus, rhoncus vitae facilisis eget, vehicula nec diam. Etiam convallis, elit id placerat sodales, nulla ligula ullamcorper nisi, quis scelerisque nunc ante at nibh. In hac habitasse platea dictumst. Integer quis mi dignissim leo convallis rhoncus. Nam vel lacus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec ipsum lorem, quis ornare velit. Nulla facilisi. Nulla at mauris a libero consequat fringilla. Maecenas nec nisi diam.</p>
			<p class='author'>Nickname</p>
			<p>Mauris ac lacus massa. Donec vestibulum dui vitae libero sodales non molestie lectus rutrum. Maecenas velit ligula, hendrerit quis consectetur nec, laoreet nec nunc. Curabitur at nisl auctor nulla vehicula malesuada et vel nunc. Quisque gravida ullamcorper urna, tincidunt placerat mi lobortis in. Nam pulvinar porttitor facilisis. Aliquam quis sollicitudin lacus. Sed viverra quam non metus tempor convallis. Ut mattis nunc a orci adipiscing eu congue metus semper. Proin auctor leo vel nisl adipiscing aliquam. Morbi nisi eros, feugiat sit amet laoreet et, placerat vitae metus. Nam viverra aliquet lacus sed volutpat.</p>
			<p class='author'>Sebbo</p>
		</div>
		<div class='bubble'></div>
		
		<a href='http://www.twitter.com'><div class='original'>Twitter</div></a>	
		<div class='post'>
			<div class='main'>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam erat. Fusce eu enim vitae neque feugiat lacinia eget nec nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur ultricies nisi, at lobortis sem mattis in. In at dui lacus. Nullam aliquam malesuada hendrerit. Nulla sagittis suscipit enim ac blandit. Duis lobortis ornare tincidunt. Curabitur pharetra luctus est, quis dignissim tellus tincidunt ut. Nulla venenatis aliquet consequat.</p>
			</div>
			<p>Fusce consequat odio at nunc tincidunt id lacinia lorem ultrices. Fusce tempor, quam eget vehicula fermentum, sapien purus egestas dui, non rhoncus nisi tellus facilisis magna. Curabitur iaculis sodales pellentesque. Nunc pellentesque blandit lacinia. Vivamus vel sem eget nulla bibendum dapibus. Quisque quam quam, commodo nec egestas eu, pharetra ac sem. Nunc ante tellus, rhoncus vitae facilisis eget, vehicula nec diam. Etiam convallis, elit id placerat sodales, nulla ligula ullamcorper nisi, quis scelerisque nunc ante at nibh. In hac habitasse platea dictumst. Integer quis mi dignissim leo convallis rhoncus. Nam vel lacus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec ipsum lorem, quis ornare velit. Nulla facilisi. Nulla at mauris a libero consequat fringilla. Maecenas nec nisi diam.</p>
			<p class='author'>Nickname</p>
			<p>Mauris ac lacus massa. Donec vestibulum dui vitae libero sodales non molestie lectus rutrum. Maecenas velit ligula, hendrerit quis consectetur nec, laoreet nec nunc. Curabitur at nisl auctor nulla vehicula malesuada et vel nunc. Quisque gravida ullamcorper urna, tincidunt placerat mi lobortis in. Nam pulvinar porttitor facilisis. Aliquam quis sollicitudin lacus. Sed viverra quam non metus tempor convallis. Ut mattis nunc a orci adipiscing eu congue metus semper. Proin auctor leo vel nisl adipiscing aliquam. Morbi nisi eros, feugiat sit amet laoreet et, placerat vitae metus. Nam viverra aliquet lacus sed volutpat.</p>
			<p class='author'>Nickname</p>
		</div>
		<div class='bubble'></div>
		
		<a href='http://www.facebook.com'><div class='original'>Facebook</div></a>	
		<div class='post'>
			<div class='main'>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam erat. Fusce eu enim vitae neque feugiat lacinia eget nec nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur ultricies nisi, at lobortis sem mattis in. In at dui lacus. Nullam aliquam malesuada hendrerit. Nulla sagittis suscipit enim ac blandit. Duis lobortis ornare tincidunt. Curabitur pharetra luctus est, quis dignissim tellus tincidunt ut. Nulla venenatis aliquet consequat.</p>
			</div>
			<p>Fusce consequat odio at nunc tincidunt id lacinia lorem ultrices. Fusce tempor, quam eget vehicula fermentum, sapien purus egestas dui, non rhoncus nisi tellus facilisis magna. Curabitur iaculis sodales pellentesque. Nunc pellentesque blandit lacinia. Vivamus vel sem eget nulla bibendum dapibus. Quisque quam quam, commodo nec egestas eu, pharetra ac sem. Nunc ante tellus, rhoncus vitae facilisis eget, vehicula nec diam. Etiam convallis, elit id placerat sodales, nulla ligula ullamcorper nisi, quis scelerisque nunc ante at nibh. In hac habitasse platea dictumst. Integer quis mi dignissim leo convallis rhoncus. Nam vel lacus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec ipsum lorem, quis ornare velit. Nulla facilisi. Nulla at mauris a libero consequat fringilla. Maecenas nec nisi diam.</p>
			<p class='author'>Nickname</p>
			<p>Mauris ac lacus massa. Donec vestibulum dui vitae libero sodales non molestie lectus rutrum. Maecenas velit ligula, hendrerit quis consectetur nec, laoreet nec nunc. Curabitur at nisl auctor nulla vehicula malesuada et vel nunc. Quisque gravida ullamcorper urna, tincidunt placerat mi lobortis in. Nam pulvinar porttitor facilisis. Aliquam quis sollicitudin lacus. Sed viverra quam non metus tempor convallis. Ut mattis nunc a orci adipiscing eu congue metus semper. Proin auctor leo vel nisl adipiscing aliquam. Morbi nisi eros, feugiat sit amet laoreet et, placerat vitae metus. Nam viverra aliquet lacus sed volutpat.</p>
			<p class='author'>Nickname</p>
		</div>
		<div class='bubble'></div>
	</div>
	<div id='footer'>
		<p>Contact | No Pants Studios &copy; 2012 | Legal &amp; Terms</p>
	</div>
</body>
</html>